<template>
      <el-container >
          <!-- 头部区域 -->
          <el-header height="76px">
              <h2>销售地点管理</h2>
              <!-- 面包屑导航区域 -->
              <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item>销售地点管理</el-breadcrumb-item>
              </el-breadcrumb>
          </el-header>
          <el-main >
              <div class="main-title">
                  <h3>销售地点列表</h3>
                  <button class="new-add" @click="addFormVisible = true"  />
              </div>
                    <!--  搜索 -->
                          <el-row :gutter="20">
                              <el-col :span="23" class="search-col">
                                  <keep-alive>
                                      <el-input
                                              placeholder="查询（输入要查询的药店名称）"
                                              size="small"
                                              v-model="keyword"
                                              @input="handelQuery"
                                      >
                                      </el-input>
                                  </keep-alive>
                              </el-col>
                          </el-row>
              <!-- 表格 -->
              <el-table
                      stripe
                      :default-sort="{ prop: 'saleId', order: 'descending' }"
                      :data="saleData"
                      highlight-current-row
              >
                  <el-table-column prop="saleId" label="药店编号" sortable />
                  <el-table-column prop="saleName" label="药店名称" />
                  <el-table-column prop="salePhone" label="药店电话" />
                  <el-table-column label="操作" >
                      <template slot-scope="scope">
                          <button
                                  class="table-btn-delete"
                                  @click="deleteSalePlace(scope.row.saleId)"
                          ></button>
                          <button
                                  class="table-btn-update"
                                  @click="handleModifyOpen(scope.row)"
                          ></button>
                      </template>
                  </el-table-column>
              </el-table>
              <!-- 分页-->
              <div class="pagination">
                  <el-pagination
                          :current-page.sync="currentPage"
                          :page-size.sync="pageSize"
                          :layout="'total,prev,pager,next,jumper'"
                          :total="total"
                          @current-change="handleCurrentChange"
                  />
              </div>
          </el-main>
                  <el-dialog
                          title="新增销售地点"
                          :visible.sync="addFormVisible"
                          :modal-append-to-body="false"
                          @close="handleAddClose"
                  >
                      <el-form
                              :model="addForm"
                              hide-required-asterisk
                              ref="addForm"
                              label-width="110px"
                      >
                          <el-form-item label="药店名称" prop="saleName" :rules="rules.nameRules">
                              <el-input
                                      v-model.trim="addForm.saleName"
                                      autocomplete="off"
                                      required
                              ></el-input>
                          </el-form-item>
                          <el-form-item
                                  label="药店电话"
                                  prop="salePhone"
                                  :rules="rules.phoneRules"
                          >
                              <el-input
                                      v-model.number="addForm.salePhone"
                                      autocomplete="off"
                                      required
                              ></el-input>
                          </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                          <el-button @click="addFormVisible = false">取 消</el-button>
                          <el-button type="primary" @click="AddSalePlace('addForm')"
                          >确 定</el-button
                          >
                      </div>
                  </el-dialog>
                  <!-- 点击修改后的弹窗 -->
                  <el-dialog
                          title="修改销售地点信息"
                          :visible.sync="modifyFormVisible"
                          :modal-append-to-body="false"
                          @close="handleModifyClose"
                  >
                      <el-form
                              :model="modifyForm"
                              hide-required-asterisk
                              ref="modifyForm"
                              label-width="110px"
                      >
                          <el-form-item label="药店编号">
                              <el-input
                                      v-model="modifyForm.saleId"
                                      autocomplete="off"
                                      disabled
                              ></el-input>
                          </el-form-item>
                          <el-form-item label="药店名称" prop="saleName" :rules="rules.nameRules">
                              <el-input
                                      v-model.trim="modifyForm.saleName"
                                      autocomplete="off"
                                      required
                              ></el-input>
                          </el-form-item>
                          <el-form-item
                                  label="药店电话"
                                  prop="salePhone"
                                  :rules="rules.phoneRules"
                          >
                              <el-input
                                      v-model.number="modifyForm.salePhone"
                                      autocomplete="off"
                                      required
                              ></el-input>
                          </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                          <el-button @click="modifyFormVisible = false">取 消</el-button>
                          <el-button type="primary" @click="ModifySalePlace('modifyForm')"
                          >确 定</el-button
                          >
                      </div>
                  </el-dialog>
      </el-container>
</template>
<script>
import rules from "../../utils/validator";
import service from "@/utils/request";

export default {
    name: "saleIndex",
    data() {
        return {
            saleData:[],
            currentPage: 1,
            pageSize: 5, // 每页的数据条数
            total:0,
            keyword: "",
            addFormVisible: false, // 控制新增公司页面的显示
            addForm: {
                saleName: "",
                salePhone: "",
            },
            modifyFormVisible: false, // 控制修改信息页面的显示
            modifyForm: {
                saleId: "",
                saleName: "",
                salePhone: "",
            },
            rules, // 封装好的表单验证
        };
    },
    mounted() {
        this.getSales();
    },
    methods: {
        //删除销售地点
        deleteSalePlace(id){
            service.get("/sale/deleteSale/"+id).then(res=>{
                if(res.code===200){
                    this.$message({
                        message: res.message,
                        type:"success"
                    })
                    //刷新页面
                    this.currentPage=1
                    this.getSales()
                }else {
                    this.$message({
                        message: res.message,
                        type:"error"
                    })
                }
            })
        },
        //添加销售地点
        AddSalePlace(formName){
            this.$refs[formName].validate((valid) => {
                //检查表单
                if (valid) {
                    service.post("/sale/addSale",
                        {
                            saleName: this.addForm.saleName,
                            salePhone: this.addForm.salePhone
                        })
                        .then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    message: res.message,
                                    type: "success"
                                })
                                this.addFormVisible = false
                                //刷新页面，同步数据库页码，并跳到最后一页
                                this.getSales().then(()=>{
                                    this.currentPage=Math.ceil(this.total / this.pageSize);//计算总页数，并赋值该当前页
                                    this.getSales()
                                })
                            } else {
                                this.$message({
                                    message: res.message,
                                    type: "error"
                                })
                            }
                        })
                }else {
                    this.$message.error('请按照要求输入');
                    return false;
                }
            });
        },
        //修改销售地点
        ModifySalePlace(formName){
            let param={
                saleId:this.modifyForm.saleId,
                saleName:this.modifyForm.saleName,
                salePhone:this.modifyForm.salePhone
            }
            this.$refs[formName].validate((valid) => {
                //检查表单
                if (valid) {
                    //发送修改请求
                    service.post("/sale/updateSale",param)
                        .then(res=>{
                            if(res.code===200){
                                this.$message({
                                    message: res.message,
                                    type:"success"
                                })
                                this.modifyFormVisible=false
                                //刷新页面
                                this.getSales()

                            }else {
                                this.$message({
                                    message: res.message,
                                    type:"error"
                                })
                            }
                        })
                }else {
                    this.$message.error('请按照要求输入');
                    return false;
                }
            });
        },
        //获取关键字并准备模糊查询
        handelQuery(){
            this.currentPage=1
            this.doSearch()
        },
        //模糊查询
        doSearch(){
            //调用接口
            service.get("/sale/getSale",{
                params:{
                    key:this.keyword,
                    currentPage:this.currentPage,
                    pageSize:this.pageSize
                }
            }).then(res=>{
                if(res.code===200){
                    this.saleData=res.data.records
                    this.total=res.data.total
                }else {
                    //没有更多数据，更新表组件数据
                    this.saleData=[]
                    this.total=0
                    this.currentPage=1
                }
            })
        },
        //获取所有销售地点
        getSales(){
          return  service.get("/sale/getSale",{
                params:{
                    currentPage:this.currentPage,
                    pageSize:this.pageSize
                }
            }).then((res)=>{
                if(res.code===200){
                    this.saleData=res.data.records
                    this.total = res.data.total
                }else {
                    this.saleData=[]
                    this.total=0
                    this.currentPage=1
                }
            })
        },
        //点击某一行修改按钮时，开启弹窗，给表单赋值
        handleModifyOpen(oldData){
            this.modifyFormVisible=true;
            this.modifyForm=oldData;
        },
        // 每次关闭表单的时候重置表单
        handleAddClose() {
            this.addForm = {};
            this.$refs.addForm.resetFields();
        },
        handleModifyClose() {
            this.$refs.modifyForm.clearValidate();
        },
        //分页器页码改变时触发
        handleCurrentChange(){
            if (this.keyword.length) {
                this.doSearch();
            } else {
                this.getSales();
            }
        },
    }
}
</script>
<style scoped lang="less">
@import "../../style/infoManage.less";
</style>